<template>
  <div class="active">
    <el-row>
      <el-button type="primary">新增动态</el-button>
    </el-row>

    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          label="操作"
          width="300"
          prop="type"
          :filter-multiple="false"
          :column-key="'type'"
          :filters="filterStatus"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.option }}</span>
          </template>
        </el-table-column>
        <el-table-column label="显示" width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.value"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="浏览量">
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更多">
          <template>
            <el-popover trigger="click" placement="bottom">
              <div style="width: 80px">
                <p>编辑</p>
                <p>删除</p>
              </div>
              <div slot="reference" class="name-wrapper">
                <span class="more">...</span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          option: "活动开始了！",
          value: 1,
          number: 24324,
          date: "2021-2-1 12:50:30",
          dropdown: "",
        },
      ],
      filterStatus: [
        { text: "显示", value: "显示" },
        { text: "隐藏", value: "隐藏" },
        { text: "删除", value: "删除" },
        { text: "参与投票", value: "参与投票" },
      ],
      listQuery: {
        curPage: 1,
        pageSize: 10,
        page: 1,
        type: undefined,
      },
    };
  },
  methods: {
    filterChange(filters) {
      if (filters.type) {
        this.listQuery.type = filters.type[0];
      }
    },
    getMore() {},
  },
};
</script>

<style lang="scss" scoped>
.active {
  margin: 30px 0 0 50px;
  width: 850px;
  .el-row {
    width: 100%;
    .el-button {
      width: 100px;
      height: 30px;
      line-height: 0.5;
    }
  }
  .table {
    margin-top: 30px;
    .more {
      font-weight: 600;
      cursor: pointer;
    }
  }
}
</style>